<template>
	<div class="pub-main">
		<sy-header></sy-header>
		<!-- <div class="iframe mt10">
			<iframe src="http://www.yhkjedu.com/jxsj2.html" width="100%" height="100%" frameborder="0"></iframe>
		</div> -->
		<div class="mains-cont">
			<el-col :span="24" class="section-1"></el-col>

			<el-col :span="24" class="section-3" style="padding-bottom: 0;">
				<div class="comp-title">
					<div class="title">服务与支持</div>
					<i class="bot"></i>
					<span style="margin-top: 10px;">永恒教育为客户提供优质的服务</span>
				</div>
				<el-col :span="24" class="item" style="background-color: #e6eff5;padding-top: 120px;">
					<div class="list" v-for="(item,index) in content" :key="index">
						<el-image :src="item.src" class="img"></el-image>
						<p class="title" style="margin: 20px 0 10px;">{{item.title}}</p>
						<p class="content">{{item.cont}}</p>
					</div>
				</el-col>
			</el-col>
			<el-col :span="24" class="section-3 posr" style="background-color: #e6eff5;background: url(../../../static/image/service/ser_hez.png) no-repeat top;background-size: cover;height: 650px;">
				<!-- <el-image src="/static/image/service/ser_hez.png"></el-image> -->
				<div class="cont posa">
					<div class="comp-title">
						<div class="title" style="color: #5b90ff;">合作·试用</div>
						<i class="bot" style="background-color: #fff"></i>
						<span style="margin-top: 10px;color: #ccc;">永恒教育期待与您的合作</span>
					</div>
					<el-divider></el-divider>
					<el-col :span="24">
						<div class="form-line">
							<div class="change-btn">
								<div :class="{active:i ==val}" class="btn-cont" v-for="(item,i) in changeList" :key="i" @click="changeBtn($event,i)">
									<!-- <el-image :src="imgurl1"></el-image> -->
									<i class="img"></i>
									<span class="title">{{item.title}}</span>
								</div>
							</div>
							<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="w500">
								<el-form-item prop="schoolName">
									<el-input v-model="ruleForm.schoolName" placeholder="请输入学校名称或单位名称"></el-input>
								</el-form-item>
								<el-form-item prop="userName">
									<el-input v-model="ruleForm.userName" placeholder="请输入联系人姓名"></el-input>
								</el-form-item>
								<el-form-item prop="phone">
									<el-input v-model="ruleForm.phone" type="" placeholder="请输入联系人手机号"></el-input>
								</el-form-item>
								<el-form-item prop="email">
									<el-input v-model="ruleForm.email" placeholder="请输入联系人邮箱(选填)"></el-input>
								</el-form-item>
								<el-form-item class="tc">
									<el-button type="primary" @click="submitForm('ruleForm')" class="w200">立即申请</el-button>
								</el-form-item>
							</el-form>
						</div>
					</el-col>
				</div>

			</el-col>
			<el-col :span="24" class="section-2" style="background-color: #f8f9fd;">
				<div class="comp-title">
					<div class="title">服务热线</div>
					<i class="bot"></i>
				</div>
				<el-col :span="24" class="section-main">
					<div class="right" style="background-color: #fff;">
						<div class="main-cont">
							<ul>
								<li>
									<el-image src="/static/image/service/ser_code.png"></el-image>
									<p class="margin20">客服微信</p>
									<p>yhkjedu</p>
								</li>
								<li>
									<el-image src="/static/image/service/ser_tel.png"></el-image>
									<p class="margin20">电话</p>
									<p>010-62698511</p>
								</li>
								<li>
									<el-image src="/static/image/service/ser_qq.png"></el-image>
									<p class="margin20">客服QQ号</p>
									<p>749921801</p>
								</li>
							</ul>
						</div>
					</div>
					<div class="left">
						<el-image src="/static/image/service/ser_img.png"></el-image>
					</div>
				</el-col>
			</el-col>


			<footer-view></footer-view>
		</div>
	</div>
</template>

<script>
	import footerView from './compoents/footer.vue';
	export default {
		components: {
			footerView
		},
		data() {
			var checkPhone = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('手机号不能为空'));
				}
				setTimeout(() => {
					var regex = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
					if (!(regex.test(value))) {
						callback(new Error('请输入正确手机号'));
					} else {
						callback();
					}
				}, 1000);
			};
			return {
				changeList: [{
					title: '加盟代理'
				}, {
					title: '申请试用'
				}],
				val: 0,
				imgurl1: '/static/image/service/btn_act.png',
				imgurl2: '/static/image/service/btn.png',
				content: [{
						src: '/static/image/service/s1.png',
						title: '完备的服务体系',
						cont: '完备的技术支持，及时的售后服务响应,优秀的技术支持售后服务队伍'
					},
					{
						src: '/static/image/service/s2.png',
						title: '平台支持',
						cont: '软件平台统一维护升级，省去后顾之忧'
					},
					{
						src: '/static/image/service/s3.png',
						title: '线下支持',
						cont: '定期为合作伙伴提供各类教育展会，专家研讨宣传'
					}
				],
				ruleForm: {
					schoolName: '',
					userName: '',
					phone: '',
					email: ''
				},
				rules: {
					schoolName: [{
						required: true,
						message: '请输入学校名称或单位名称',
						trigger: 'blur'
					}],
					userName: [{
						required: true,
						message: '请输入联系人姓名',
						trigger: 'blur'
					}],
					phone: [{
						validator: checkPhone,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			changeBtn(e, i) {
				this.val = i
				//console.log(this.val);
				//console.log(e.currentTarget.className);
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var parm = {
							"schoolName": this.ruleForm.schoolName,
							"userName": this.ruleForm.userName,
							"mobile": this.ruleForm.phone,
							"email": this.ruleForm.email,
						};
						this.$axios.postRequest('/comm/insertJoinIn', parm).then(res => {
							this.$message.success('已提交申请');
						})
					} else {
						return false;
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mains-cont {
		overflow-y: scroll;
		padding: 0;
		margin: 0;
		height: calc(100% - 60px);
	}

	.section-1 {
		height: 480px;
		background: url(../../..//static/image/production/7.png) no-repeat top;
		background-size: cover;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.section-2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 55px 0;

		// section 2
		.section-main {
			display: flex;
			margin: 0 auto;
			width: 1200px;

			.left {
				flex: 1;

				.el-image {
					width: 100%;
				}
			}

			.right {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;

				.main-cont {
					background-color: #fff;

					ul {
						display: flex;
						align-items: center;
						justify-content: center;

						li {
							width: 150px;
							text-align: center;
							font-weight: bold;
							font-size: 16px;

							.margin20 {
								margin: 10px 0;
							}
						}
					}
				}
			}
		}
	}

	.comp-title {
		margin: 0 auto 20px;
		width: 260px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.title {
			font-size: 24px;
			color: #5b90ff;
		}

		i {
			margin-top: 5px;
			display: block;
			width: 80px;
			height: 3px;
			background-color: #4f555a;
		}
	}

	.section-3 {
		padding: 55px 0;

		.section-top {
			position: relative;
			margin: 0 auto;
			width: 180px;

			h3 {
				width: 100%;
				text-align: center;
				font-size: 28px;
				padding-bottom: 30px;
				z-index: 1222;
			}

			.img {
				position: absolute;
				top: -43px;
				right: -53px;

				&>>>img {
					z-index: 0;
				}
			}
		}

		// section 1
		.item {
			padding: 60px 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;

			.list {
				cursor: default;
				margin-right: 20px;
				box-sizing: border-box;
				padding: 0 50px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 320px;
				height: 376px;
				background-color: #fff;
				border-radius: 5px;

				.img {
					width: 100px;
					height: 100px;
				}

				.title {
					padding: 10px 0;
					font-size: 20px;
					font-weight: bold;
					color: #2e323e;
				}

				.content {
					font-size: 14px;
					color: #5f6573;
				}
			}
		}
	}

	.posr {
		position: relative;
		padding-bottom: 0;
	}

	.posa {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.cont {
		width: 65%;

		&>>>.el-divider {
			background-color: #575656;
		}
	}

	.form-line {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.change-btn {
			padding-bottom: 20px;
			width: 500px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.title {
				margin-left: 10px;
				color: #fff;
			}

			.btn-cont {
				cursor: pointer;
				margin-right: 60px;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.img {
					display: block;
					width: 20px;
					height: 20px;
					background: url(../../../static/image/service/btn.png);
				}

				&.active {
					.img {
						background: url(../../../static/image/service/btn_act.png);
					}
				}
			}
		}
	}

	.w500 {
		width: 500px;

		// &>>>.el-form-item__error{
		// 	color: red;
		// }
	}
</style>
